
// 点击按钮 ，触发的事件== 获得表单中用户输入的数据
document.querySelector(".login-btn").onclick =  function () {
    //用户名
    var username = document.querySelector(".username").value;
    console.log("用户名：" + username);

    //邮箱
    var email = document.querySelector(".email").value;
    console.log("邮箱：" + email);

    //密码
    var password = document.querySelector(".password").value;
    console.log("密码：" + password);

    /*=========================表单验证==============================*/
//验证用户名
    document.querySelector(".username").onblur = checkUsername;

    function checkUsername() {
        //（1）获得用户名
        var username = document.querySelector(".username").value;
        console.log("用户名：" + username);

        //(2)用户名是否合格
        if (username == "" || username == null) {// 是否为空
            //(3)消息提示
            document.querySelector(".username-msg").innerText = "用户名不能为空";
            return false;
        } else if (!/^[0-9A-Za-z]{6,12}$/.test(username)) { //  6-12个字符，只能是数字字母组成
            document.querySelector(".username-msg").innerText = "用户名必须是6-12个字符，只能是数字字母组成";
            return false;
        } else {
            document.querySelector(".username-msg").innerText = "";
            return true;
        }
    }

//验证邮箱
    document.querySelector(".email").onblur = checkEmail;

    function checkEmail() {
        var email = document.querySelector(".email").value;
        if (email == "" || email == null) {// 是否为空
            //(3)消息提示
            document.querySelector(".email-msg").innerText = "邮箱不能为空";
            return false;
        } else if (!/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(email)) {
            document.querySelector(".email-msg").innerText = "不是有效的邮箱格式";
            return false;
        } else {
            document.querySelector(".email-msg").innerText = "";
            return true;
        }
    }
    //验证密码
    document.querySelector(".password").onblur = checkPassword;

    function checkPassword() {
        var password = document.querySelector(".password").value;
        if (password == "" || password == null) {// 是否为空
            //(3)消息提示
            document.querySelector(".password-msg").innerText = "密码不能为空";
            return false;
        } else if (!/^[0-9A-Za-z]{6,12}$/.test(password)) {
            document.querySelector(".password-msg").innerText = "密码必须是6-12个字符，只能由数字字母组成";
            return false;
        } else {
            document.querySelector(".password-msg").innerText = "";
            return true;
        }
    }

//提交表单，验证
    document.querySelector(".login-area").onsubmit = function () {
        return checkUsername() && checkEmail();//  return true / return false;
    }
}
